import { QuestionCircleOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import { SelectLang as UmiSelectLang } from '@umijs/max';
import React from 'react';
export type SiderTheme = 'light' | 'dark';
import './index.css'
// 定义全屏状态类型
interface FullScreenState {
  isFullScreen: boolean;
}

export const SelectLang: React.FC = () => {
  const [isFullScreen, setIsFullScreen] = React.useState<boolean>(false);

  // 进入全屏函数
  const enterFullScreen = () => {
    const docEl = document.documentElement;
    if (docEl.requestFullscreen) {
      docEl.requestFullscreen();
    } else if ((docEl as any).webkitRequestFullscreen) {
      (docEl as any).webkitRequestFullscreen();
    } else if ((docEl as any).mozRequestFullScreen) {
      (docEl as any).mozRequestFullScreen();
    } else if ((docEl as any).msRequestFullscreen) {
      (docEl as any).msRequestFullscreen();
    }
    setIsFullScreen(true);
  };

  // 退出全屏函数
  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if ((document as any).webkitExitFullscreen) {
      (document as any).webkitExitFullscreen();
    } else if ((document as any).mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any).msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
    setIsFullScreen(false);
  };

  // 切换全屏状态函数
  const toggleFullScreen = () => {
    if (isFullScreen) {
      exitFullScreen();
    } else {
      enterFullScreen();
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <button
        onClick={toggleFullScreen}
        style={{
          border: 'none',
          background: 'transparent',
          cursor: 'pointer',
          fontSize: '18px',
          color: 'inherit',
        }}
      >
        {isFullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
      </button>
    </div>
  );
};

export const Question: React.FC = () => {
  return null;
};
